import { FunctionalComponent as FC, ref, inject, type Ref } from "vue"
import { useRoleStore } from "@/store"
import useUtils from "../../hooks/useUtils"
import type { RoleState, CommonTypeItem, CompDetaileConfigItem, AllChildItem } from "@/store/modules/role/types"

import "./index.less"
interface Prop {
  code: string
}
interface DialogInject {
  addRoleForm: Ref<{name: string, description: string, permIds: number[]}>
  checkall: Ref<boolean>
  indeterminate: Ref<boolean>
  setCheckVal: (val: boolean) => void
  setIndetVal: (val: boolean) => void
}
// 模块下每一层渲染组件
const LabelItem: FC<Prop, any> = (props, ctx) => {
  const roleStore = useRoleStore()
  return (
    <div class="label-item-box">
      {
        // roleStore.routerArr[props.code].map(item => (
        //   <div class="first-level">
        //     {RenderItem(item)}
        //     {DataItem(item, roleStore)}
        //   </div>
        // ))
        Object.values(roleStore.pageConfig).map(item => {
          if (item.parentCode === props.code) {
            return (
              <div class="first-level">
                  {RenderItem(item)}
                  {DataItem(item, roleStore)}
              </div>
            )
          }
        })
      }
    </div>
  )
}

const RenderItem = (item: CommonTypeItem) => {
  const UtilsHooks = useUtils()
  const dialogState = inject<DialogInject>("dialogState")
  const handleChange = (val: boolean, item: CommonTypeItem) => {
    if (dialogState) {
      item.level === 2 && UtilsHooks.switchSecondLevel(val, item, dialogState)
      item.level === 3 && UtilsHooks.switchThirdLevel(val, item, dialogState)
      item.level === 5 && UtilsHooks.switchLastLevel(val, item, dialogState)
    }
  }
  return (
    <div class={getClassName(item)}>
      <a-checkbox 
        value={item.id} 
        v-model={item.checked} 
        indeterminate={item.indeterminate}
        onChange={(val) => handleChange(val, item)}
      >{item.label}</a-checkbox>
    </div>
  )
}

const getClassName = (item: CommonTypeItem) => {
  let classname = ""
  switch (item.level) {
    case 2:
      classname = "first-child-item"
      break;
    case 3:
      classname = "second-child-item"
      break;
    case 4:
      classname = "third-child-item"
      break;
    case 5:
      classname = "last-child-item"
      break;
    // case 5:
    //   classname = "last-child-item"
    //   break;
    default:
      classname = ""
      break;
  }
  return classname
}

const DataItem = (item: CommonTypeItem, roleStore: RoleState) => {
  return (
    <div class="second-level">
      {
        // roleStore.pageArr[item.code].map(t => (
        //   <div class="second-content">
        //     {RenderItem(t)}
        //     {ChildDataItem(t, roleStore)}
        //   </div>
        // ))
        Object.values(roleStore.componentConfig).map(t => {
          if (t.parentCode === item.code) {
            return (
              <div class="second-content">
                {RenderItem(t)}
                {ChildDataItem(t, roleStore)}
              </div>
            )
          }
        })
      }
    </div>
  )
}

const ChildDataItem = (item: CommonTypeItem, roleStore: RoleState) => {
  return (
    <div class="third-level">
      {
        // roleStore.compArr[item.code].map(t => (
        //   <div class="last-child-box">
        //     {/* {RenderItem(t)} */}
        //     {LastChildItem(t, roleStore)}
        //   </div>
        // ))
        Object.values(roleStore.compDetaileConfig).map(t => {
          if (t.parentCode === item.code && t.children && t.children.length !== 0) {
            return (
              <div class="last-child-box">
                {t.children.map(it => (RenderItem(it as CommonTypeItem)))}
              </div>
            )
          }
        })
      }
    </div>
  )
}

// const LastChildItem = (item: CommonTypeItem, roleStore: RoleState) => (
//   roleStore.detailArr[item.code].map(t => (
//     <div class="last-child-box">
//       {RenderItem(t)}
//     </div>
//   ))
// )

export default LabelItem